import React, { Component } from 'react'
import { View, Text,StyleSheet,Button,ScrollView,Animated} from 'react-native'
let timer = null;
const styles = StyleSheet.create({
  fangkuai:{
    position:'absolute',
    height:0,
    width:0,
    borderTopWidth:20,
    borderTopColor:'transparent',
    borderLeftWidth:30,
    borderLeftColor:'transparent',
    borderRightWidth:30,
    borderRightColor:'green',
    backgroundColor:'white'
  },
  fangkuai_left:{
    position:'absolute',
    height:0,
    width:0,
    borderBottomWidth:20,
    borderBottomColor:'transparent',
    borderLeftWidth:30,
    borderLeftColor:'green',
    borderRightWidth:30,
    borderRightColor:'transparent',
    backgroundColor:'transparent'
  }
})
export default class Info extends Component {
  constructor(props){
    super(props);
    this.state = {
      type:'事假',
      startTime:'11-02 07:00',
      endTime:'12-01 18:00',
      shengpiProgress:'共一步',
      reason:'由于快递到了，需要外出拿快递',
      location:'中国安徽省合肥市蜀山区天门路157号',
      chaosong:'无',
      mergePepole:'18798762748',
      name:'张鑫',
      time_faqi:'11-2 09:22',
      time_tongyi:'11-2 10:25',
      fudao_name:'樊远兵',
      date_now:(new Date()).toLocaleTimeString(),
      year_now:(new Date()).getFullYear()+'-'+ Number((new Date()).getMonth()+1) +'-' +(new Date()).getDate()
    }
  }
  
  componentDidMount(){
    timer = setInterval(()=>{
      this.setState({
        date_now:(new Date()).toLocaleTimeString()
      })
    },400)
  }
  componentWillUnmount(){
    clearInterval(timer);
  }
  render() {
    return (
        <ScrollView>
          <View style={{height:70}}>
            <View style={{width:'100%',flex:1,flexDirection:'row',justifyContent:'space-between',height:30}}>
              <Text style={{fontSize:18,lineHeight:35}}>{'<'}</Text>
              <Text style={{fontSize:18,lineHeight:35}}>请假详情</Text>
              <Text style={{color:'rgb(20,222,231)',fontSize:15,lineHeight:35}}>反馈</Text>
            </View>
            <View style={{height:30,backgroundColor:'rgb(142,169,201)',width:'100%'}}>
                <Text style={{textAlign:'center',lineHeight:30}}>如何销假</Text>
            </View>
          </View>
           {/* 刷新条 */}
          <View style={{height:120,backgroundColor:'green',paddingTop:20,position:'relative'}}>
            <View><Text style={{fontSize:18,color:'white',textAlign:'center'}}>审 批 已 通 过</Text></View>
            <View style={{marginTop:5}}><Text style={{fontSize:30,color:'white',textAlign:'center'}}>正 在 休 假 中</Text></View>
            {/* 时间 */}
            <View style={{position:'absolute',height:20,width:'60%',backgroundColor:'rgba(128, 128, 128, 0.756)',borderRadius:15,bottom:0,left:'50%',left:90,zIndex:99}}>
              <Text style={{textAlign:'center'}}>{'当前时间：'+this.state.year_now+this.state.date_now}</Text>
            </View>
            {/* 滚动条 */}
            <View style={{flex:1,flexDirection:'row'}} ref="xin">
              <View style={{position:'relative',top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:60,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:120,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:180,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:240,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:300,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
              <View style={{position:'relative',left:360,top:10}}>
                <View style={styles.fangkuai}></View>
                <View style={styles.fangkuai_left}></View>
              </View>
            </View>
            </View>
           {/* 请假类型 */}
          <View style={{height:110,backgroundColor:'white',padding:10}}>
            <View style={{flex:1,flexDirection:'row'}}>
              <Text style={{}}>{'请假类型：'+ this.state.type}</Text>
              <Text style={{marginLeft:40}}>{'需要离校:离校'}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row'}}>
              <Text style={{}}>{'销假规则：'}</Text>
              <Text style={{color:'orange'}}>{'离校，非离校请假需要销假'}</Text>
              <Text style={{marginLeft:3,color:'blue'}}>{'查看>'}</Text>
            </View>
            <View >
              <Text style={{}}>{'实际休假时间：-'}</Text>
            </View>
          </View>
          {/* 空格蓝 */}
          <View style={{backgroundColor:'rgb(241,244,246)',height:30}}><Text style={{color:'grey',lineHeight:30}}>请假详情</Text></View>
          {/* 时间，电话，位置 */}
          <View style={{height:205,backgroundColor:'white',padding:10}}>
            <Text style={{fontSize:15}} >我的 请假申请</Text>
            <View style={{flex:1,flexDirection:'row'}}>
              <Text style={{fontSize:14,color:'grey',marginTop:10}} >{'开始时间'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:10,marginLeft:30}} >{this.state.startTime}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row'}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'结束时间'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:0,marginLeft:30}} >{this.state.endTime}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row',marginTop:-10}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'审批流程'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:0,marginLeft:30}} >{this.state.shengpiProgress}</Text>
              <Text style={{color:'blue'}}>{'  查看>'}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row',marginTop:-10}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'紧急联系人'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:0,marginLeft:15}} >{this.state.mergePepole}</Text>
              
            </View>
            <View style={{flex:1,flexDirection:'row',marginTop:-10}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'请假原因'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:0,marginLeft:30}} >{this.state.reason}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row'}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'发起位置'}</Text>
              <Text style={{fontSize:14,color:'blue',marginTop:0,marginLeft:30}} >{this.state.location}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row',marginTop:-10}}>
              <Text style={{fontSize:14,color:'grey',marginTop:0}} >{'抄送人'}</Text>
              <Text style={{fontSize:14,color:'black',marginTop:0,marginLeft:45}} >{this.state.chaosong}</Text>
            </View>
          </View>
          {/* 空格栏 */}
          <View style={{backgroundColor:'rgb(241,244,246)',height:15}}></View>
          <View style={{backgroundColor:'white',height:150,padding:10,paddingBottom:20}}>
            <Text style={{fontSize:15}}>审批状态</Text>
            <View style={{flex:1,flexDirection:'row',justifyContent:'space-between'}}>
              <Text style={{marginLeft:20,color:'grey'}}>{this.state.name+'-发起'}</Text>
              <Text style={{marginRight:20,color:'grey'}}>{this.state.time_faqi}</Text>
            </View>
            <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',marginTop:-15}}>
              <Text style={{marginLeft:20,color:'grey'}}>{'一级：[辅导员]'+this.state.fudao_name + '-审批通过'}</Text>
              <Text style={{marginRight:20,color:'grey'}}>{this.state.time_tongyi}</Text>
            </View>
            <View style={{height:40,borderColor:'grey',borderStyle:'solid',borderWidth:1,borderRadius:5,width:'90%',marginLeft:20,backgroundColor:'rgb(241,244,246)'}}>
              <Text style={{lineHeight:40,marginLeft:10}}>审批意见：无</Text>
            </View>
          </View>
          <View style={{height:150,flex:1,justifyContent:'space-between',padding:15}}>
            <Button title="去销假" ></Button>
            <Button title="申请续假"></Button>
            <Button title="转发"></Button>
          </View>
        </ScrollView>
    )
  }
}
